<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="title" :visible.sync="visible" width="600px" append-to-body :close-on-click-modal="false" @closed="reset">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单">
            <tree-select
              v-model="form.parentId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
            <el-radio-group v-model="form.menuType">
              <el-radio label="M">目录</el-radio>
              <el-radio label="C">菜单</el-radio>
              <el-radio label="F">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item v-if="form.menuType !== 'F'" label="菜单图标">
            <el-popover
              placement="bottom-start"
              width="460"
              trigger="click"
              @show="$refs['iconSelect'].reset()">
              <icon-select ref="iconSelect" @selected="selected"/>
              <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
                <svg-icon
                  v-if="form.icon"
                  slot="prefix"
                  :icon-class="form.icon"
                  class="el-input__icon"
                  style="height: 32px;width: 16px;"/>
                <i v-else slot="prefix" class="el-icon-search el-input__icon"/>
              </el-input>
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="form.menuType !== 'F'" label="是否外链">
            <el-radio-group v-model="form.isFrame">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.menuType !== 'F'" label="路由地址" prop="path">
            <el-input v-model="form.path" placeholder="请输入路由地址"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="form.menuType === 'C'">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="form.component" placeholder="请输入组件路径"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.menuType !== 'M'" label="权限标识">
            <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="form.menuType !== 'F'" label="显示状态">
            <el-radio-group v-model="form.visible">
              <el-radio
                v-for="dict in visibleOptions"
                :key="dict.dictValue"
                :label="dict.dictValue">
                {{dict.dictLabel}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.menuType !== 'F'" label="菜单状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictValue">
                {{dict.dictLabel}}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="form.menuType === 'C'" label="是否缓存">
            <el-radio-group v-model="form.isCache">
              <el-radio label="0">缓存</el-radio>
              <el-radio label="1">不缓存</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.parentId === '0'" label="系统模块" prop="systemName">
            <el-select v-model="form.systemName" placeholder="请选择">
              <el-option
                v-for="dict in systemNameOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="submitting" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenu, updateMenu, addMenu } from "@/api/system/menu";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";

export default {
  name: "edit",
  components: {
    TreeSelect,
    IconSelect
  },
  props: {
    statusOptions: {
      type: Array,
      default: []
    },
    menuOptions: {
      type: Array,
      default: []
    },
    systemNameOptions: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      id: undefined,
      title: "新增编辑",
      visible: false,
      submitting: false,
      visibleOptions: [],
      // 表单参数
      form: {
        parentId: "0",
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0",
        systemName: undefined
      },
      // 表单校验
      rules: {
        menuName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
        ],
        path: [
          { required: true, message: "路由地址不能为空", trigger: "blur" }
        ],
        systemName: [
          { required: true, message: "系统模块不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    init(id, parentId, title) {
      this.visible = true;
      this.id = id;
      this.form.parentId = parentId;
      this.title = title;
      this.getDictOptions();
      if (id) {
        this.initData();
      }
    },
    initData() {
      getMenu(this.id).then(response => {
        this.form = response;
      });
    },
    getDictOptions() {
      this.getDicts("sys_show_hide").then(response => {
        this.visibleOptions = response;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (!(node.children && node.children.length > 0)) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.menuName,
        children: node.children
      };
    },
    // 选择图标
    selected(name) {
      this.form.icon = name;
    },
    close() {
      this.visible = false;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitting = true;
          if (this.id) {
            updateMenu(this.id, this.form).then(response => {
              this.submitting = false;

              this.msgSuccess("修改成功");
              this.close();
              this.$emit('success');
            }).catch(() => {
              this.submitting = false;
            });
          } else {
            addMenu(this.form).then(response => {
              this.submitting = false;

              this.msgSuccess("新增成功");
              this.close();
              this.$emit('success');
            }).catch(() => {
              this.submitting = false;
            });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        parentId: "0",
        menuName: undefined,
        icon: undefined,
        menuType: "M",
        orderNum: undefined,
        isFrame: "1",
        isCache: "0",
        visible: "0",
        status: "0"
      };
      this.resetForm("form");
    }
  }
}
</script>

<style scoped>

</style>
